<div class="bg-primary text-white py-4">
    <div class="container">
        <h1>Your Account</h1>
        <p class="col-md-7 pl-0">Here you can view your current subscriptions and coverage universes, see what additional coverage is available, contact
            your Client Advisor, or change your password.</p>
    </div>
</div>

<div class="container mt-5">
    <div class="row mt-5">
        <div class="col-md-4">
            <h4>Client Advisor</h4>
            <div class="card shadow">
                <div class="card-body">
                    <p>Your Client Advisor is available to answer questions, respond to issues or feedback, provide training,
                        and help you manage your subscriptions.</p>
                    <a href="mailto:{{ managerEmail }}" class="btn btn-sm btn-transparent">
                        <i class="ti-email"></i> Contact</a>
                </div>
            </div>

            <h4 class="mt-5">Change Password</h4>
            <div class="card shadow">
                <div class="card-body">
                    <p>Change or Reset your password in Global Access. The new password must adhere to the security guidelines.</p>
                    <a [routerLink]="['/login', 'reset']" class="btn btn-sm btn-transparent">
                        <i class="ti-lock"></i> Change Password</a>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <h4>Subscriptions</h4>
            <div class="card shadow">
                <div class="card-body">
                    <p>This section indicates which research subscriptions and universes of coverage are active for your account,
                        and which are available to include with an additional subscription.</p>
                    <div *ngFor="let research of researchProducts" class="card py-3 px-4 mb-3">
                        <div class="row">
                            <div class="col-md-5">
                                {{ research.name }}
                            </div>
                            <div class="col-md-7">
                                <div *ngIf="research.isActive" class="row">
                                    <div class="col-md-3">
                                        <i [ngClass]="{'ti-check': research.isActive, 'ti-close': !research.isActive}"></i>
                                        <span class="ml-2">{{ research.isActive ? 'Active' : 'Not Active' }}</span>
                                    </div>
                                    <div class="col-md-4">
                                        {{ research.coveredIndices.length }} {{ research.coveredIndices.length === 1 ? 'Universe' : 'Universes' }}
                                    </div>
                                    <div class="col-md-5">
                                        {{ research.uncoveredIndices.length }} More Available
                                    </div>
                                </div>
                                <div *ngIf="!research.isActive">
                                    <a href="mailto:{{ managerEmail }}?subject={{ research.name }}" class="btn btn-sm btn-transparent">Request Demo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="mt-5">Features</h4>
            <div class="card shadow">
                <div class="card-body">
                    <p>This section indicates which features in Global Access are active for your account, and which are available
                        to include with an additional subscription.</p>
                    <div *ngFor="let feature of features" class="card py-3 px-4 mb-3">
                        <div class="row">
                            <div class="col-md-5">
                                {{ feature.name }}
                            </div>
                            <div class="col-md-7">
                                <i [ngClass]="{'ti-check': feature.isActive, 'ti-close': !feature.isActive}"></i>
                                <span class="ml-2">{{ feature.isActive ? 'Active': 'Not Active. Contact us for more information' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="mt-5">Additional Research Products Available</h4>
            <div class="card shadow">
                <div class="card-body">
                    <div class="row d-flex">
                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/carbon-risk-rating/" target="_blank">
                                        <h5 class="mb-3">Carbon Risk Rating</h5>
                                        <p>Align your portfolio to the future low-carbon economy.</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/controversial-weapons-radar" target="_blank">
                                        <h5 class="mb-3">Controversial Weapons Radar</h5>
                                        <p>Identify and understand companies’ involvement in controversial weapons that can 
                                                have a disproportionate and indiscriminate impact on civilian population. </p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/country-risk-research-and-rating" target="_blank">
                                        <h5 class="mb-3">Country Risk Research and Ratings</h5>
                                        <p>Compliment traditional sovereign bond analysis to better understand reputational
                                                risks, long term economic prospects and credit worthiness.</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/sanctions-research" target="_blank">
                                        <h5 class="mb-3">Sanctions Research</h5>
                                        <p>Identify countries in breach of UN, US and EU sanction criteria to manage
                                                associated reputational and financial risks in your sovereign bond portfolio.</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/arms-trade" target="_blank">
                                        <h5 class="mb-3">Arms Trade Research</h5>
                                        <p>Identify companies that sell arms to sanctioned countries or countries where 
                                                there is a high risk of violence against civilians.</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/human-rights-radar-country-risk" target="_blank">
                                        <h5 class="mb-3">Human Rights Radar</h5>
                                        <p>Identify and understand companies’ involvement in countries and territories 
                                                where there is a high risk of human rights violations.</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card research-product h-100">
                                <div class="card-body">
                                    <a href="https://www.sustainalytics.com/sustainable-development-goals-analytics/" target="_blank">
                                        <h5 class="mb-3">Sustainable Development Analytics</h5>
                                        <p>Align your portfolio and holdings to the Sustainable Development Goals (SDGs).</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>